<template>
  <div class="evaluate_main sub-margin">
    <div class="sub-page-title sub-page-return">
      <el-button size="small" icon="el-icon-arrow-left" @click.stop="returnPage">返回</el-button>
      {{ pageTitle || activeUser.needDealName }}
    </div>
    <div class="content">
      <template v-if="rollList && rollList.length > 0">
        <!-- 左侧 -->
        <div class="left-con">
          <div class="page_header">
            <!-- 分管领导评价 -->
            <div class="oper" v-if="queryRouter.busSign.includes('DEAL_LEADER_ASSESS')">
              <el-button
                type="primary"
                size="small"
                plain
                @click.stop="batchAll"
                v-if="activeUser.status != 3 && evaluateTypeTabs[0].value > 1">
                批量评分
              </el-button>
              <!-- 是否可以催报 -->
              <template v-if="evaluateTypeTabs[3].value && evaluateTypeTabs[3].value > 0">
                <el-button type="warning" size="small" @click="warnPerson(2)" v-if="isUrgeAll == '1'">
                  全部催报
                </el-button>
                <el-button type="info" size="small" v-else>已催报</el-button>
              </template>
              <el-button type="primary" size="small" @click="commitAll" v-if="activeUser.status != 3">提交</el-button>
            </div>

            <!-- 主要领导评价 -->
            <div
              class="oper"
              v-if="
                queryRouter.busSign.includes('DEAL_MAIN_LEADER_ASSESS') &&
                rollList.length > 0 &&
                rollList[0].status != 3
              ">
              <template v-if="evaluateTypeTabs[3].value && evaluateTypeTabs[3].value > 0">
                <el-button type="warning" size="small" @click="warnPerson(2)" v-if="isUrgeAll == '1'">
                  全部催报
                </el-button>
                <el-button type="info" size="small" v-else>已催报</el-button>
              </template>
              <el-button type="primary" size="small" @click="lenderTableSave">保存</el-button>
              <el-button type="primary" size="small" @click="lenderTableCommit" v-if="activeUser.status != 3">
                提交
              </el-button>
            </div>
          </div>

          <div class="page_main">
            <!-- 评价状态 -->
            <div class="page_main_type">
              <div
                :class="['page_main_type-list', { active: activeType == item.id }]"
                v-for="item in evaluateTypeTabs"
                :key="item.id"
                @click="typeChange(item)">
                <span>{{ item.name }}</span>
                <span class="num" :style="{ color: item.valColor }">{{ item.value }}</span>
                <span class="unit">{{ item.unit }}</span>
              </div>
            </div>
            <div class="page_con">
              <!-- 主要领导评价 -->
              <evaluate-option
                v-if="queryRouter.busSign.includes('DEAL_MAIN_LEADER_ASSESS') && !groupByLeader"
                :dataList="selectRollList"
                :activeUser="activeUser"
                @setActivePeople="setActivePeople"
                :goodNum="goodNum"
                :rollListAll="rollList"
                :quarterNow="quarterNow"
                :calcRule="calcRule"
                :needPlusMinusPoints="needPlusMinusPoints"
                :needPeopleAssess="needPeopleAssess"></evaluate-option>
              <evaluate-option-group
                v-else-if="queryRouter.busSign.includes('DEAL_MAIN_LEADER_ASSESS') && groupByLeader"
                :dataList="selectRollList"
                :activeUser="activeUser"
                @setActivePeople="setActivePeople"
                :goodNum="goodNum"
                :rollListAll="rollList"
                :pageTitle="pageTitle"
                :groupByLeader="groupByLeader"
                :calcRule="calcRule"
                :needPlusMinusPoints="needPlusMinusPoints"
                :needPeopleAssess="needPeopleAssess"></evaluate-option-group>
              <template v-else>
                <EvaluatePeople
                  v-if="selectRollList && selectRollList.length > 0"
                  :rollList="selectRollList"
                  @setActivePeople="setActivePeople"
                  :busSign="queryRouter.busSign" />
                <EvaluateCon
                  :activeUser="activeUser"
                  @warnPerson="warnPerson"
                  @quarterlySummaryChange="quarterlySummaryChange"
                  @pageint="setPageInitData('2')"
                  :goodNum="goodNum"
                  :rollListAll="rollList"
                  :quarterNow="quarterNow" />
              </template>
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <RightDetail
          class="right-con"
          :activeUser="activeUser"
          v-if="activeUser && activeUser.userId"
          :requestType="requestType"
          :quarterlyShow="quarterlyShow"
          :quarterNow="quarterNow"
          :showHistory="showHistory" />
      </template>
      <empty v-else></empty>
    </div>

    <XnDialog
      custom-class="branch_dialog batch_dialog"
      title="批量评分"
      :visible.sync="batchShow"
      @close="batchShow = false"
      width="1200px">
      <evaluate-option
        ref="option"
        :dataList="batchRollList"
        :activeUser="activeUser"
        :goodNum="goodNum"
        v-if="batchShow"
        :rollListAll="batchRollList"
        :quarterNow="quarterNow"></evaluate-option>
      <div slot="footer" class="dialog-footer">
        <el-button @click="batchShow = false">返回</el-button>
        <el-button type="primary" @click="batchSave">保存</el-button>
      </div>
    </XnDialog>
  </div>
</template>

<script>
import EvaluatePeople from './EvaluatePeople'
import EvaluateCon from './EvaluateCon'
import RightDetail from './RightDetail'
import EvaluateOption from './EvaluateOption'
import EvaluateOptionGroup from './EvaluateOptionGroup'
import XnDialog from '@com/xnDialog.vue'
import { mapGetters, mapMutations } from 'vuex'

import {
  getFirstAssessData,
  submitAllAssess,
  getUserAssessData,
  saveSimpleAssess,
  checkSubmitAllAssess,
  getListAssessContent,
  saveUrgeByNeedDeal,
} from '@apis/evaluation.js'
import { cloneDeep } from 'lodash'

export default {
  name: 'EvaluateMain',
  components: { EvaluatePeople, EvaluateCon, RightDetail, EvaluateOption, EvaluateOptionGroup, XnDialog },
  props: {},
  data() {
    return {
      // 页面标题
      pageTitle: '',
      activeType: '-3',
      evaluateTypeTabs: [
        { name: '总计', value: '0', unit: '人', id: '-3', valColor: '#333' },
        { name: '未评价', value: '0', unit: '人', id: '1', valColor: '#d9001b' },
        { name: '已评价', value: '0', unit: '人', id: '2', valColor: '#8bc402' },
        { name: '未提交', value: '0', unit: '人', id: '0', valColor: '#f59a23' },
      ],
      // 是否可以全部催报
      isUrgeAll: '',
      // 人员列表
      rollList: [],
      // 显示人员
      selectRollList: [],
      // 当前选中人员信息
      activeUser: {},
      // 子组件改变用户状态--退回  用户id，用于默认选中
      changeActiveUserId: '',
      // 从代办进入还是从已办 空是从代办进入，1是从已办进入
      requestType: '',
      // 路由参数
      queryRouter: {
        // 纪实id
        noteId: '',
        // 纪实类型 是月/还是季 还是科室的季度总结
        recordType: '',
        // 打分表Id
        saScoringId: '',
        // 03-02 是同事互评
        bussign: '',
      },
      quarterlyShow: false,
      batchShow: false,
      batchRollList: [],
      goodNum: 0,
      groupByLeader: false, // 是否按领导分组展示信息
      groupByLeaderList: [], // 按领导分组展示列表初始数据
      quarterNow: 0, // 当前季度
      calcRule: [],
      needPlusMinusPoints: true, // 是否显示加分项
      needPeopleAssess: true, // 是否显示民主测评
      showHistory: false, // 是否显示历史评价
    }
  },
  computed: {
    ...mapGetters('evaluation', ['evSelectUserList', 'changeUserID']),
  },
  watch: {
    changeUserID(now, old) {
      this.setPageInitData('1')
    },
    evSelectUserList: {
      handler(now, old) {
        this.rollList = now
        this.setEvaluateTypeTabsVal()
        if (this.groupByLeader) {
          this.groupLeaderDealSelect(this.activeType)
        } else {
          if (this.activeType === '-3') {
            this.selectRollList = this.rollList
          } else {
            this.selectRollList = this.rollList.filter(item => {
              return String(item.status) === this.activeType
            })
          }
        }
      },
      deep: true,
    },
    pageTitle: {
      handler(news) {
        if (news.indexOf('第一季度') !== -1) {
          this.quarterNow = 0
        } else if (news.indexOf('第二季度') !== -1) {
          this.quarterNow = 1
        } else if (news.indexOf('第三季度') !== -1) {
          this.quarterNow = 2
        } else if (news.indexOf('第四季度') !== -1) {
          this.quarterNow = 3
        }
      },
      immediate: true,
    },
  },
  created() {
    this.queryRouter = this.$route.query
    this.requestType = this.$route.query.requestType ? this.$route.query.requestType : 0 // 从代办进入还是从已办 空是从代办进入，1是从已办进入
    this.setPageInitData('0')
  },
  mounted() {},
  methods: {
    ...mapMutations('evaluation', ['setEvSelectUserList', 'setChangeUserID']),

    setPageInitData(type) {
      // 分管领导评分
      if (this.queryRouter.busSign.includes('DEAL_LEADER_ASSESS')) {
        this.getPageGradeDataList(type)
      } else {
        if (type === '1') return
        this.getLenderUserAssessData(type)
      }
    },
    returnPage() {
      this.$router.go(-1)
    },
    // 催报
    warnPerson(type) {
      this.$confirm('您确定要进行催报吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.saveUrgeData(type)
        })
        .catch(() => {})
    },
    // 催报方法
    saveUrgeData(type) {
      saveUrgeByNeedDeal({
        type: Number(type),
        urgeUserId: this.activeUser.userId,
        needId: this.$route.query.needId,
        optionUserId: localStorage.pskh_userId,
        tenantId: localStorage.pskh_tenantId,
      }).then(res => {
        if (res.status === 200) {
          this.$message({
            message: '催报成功',
            type: 'success',
          })
          if (type === 2) {
            this.isUrgeAll = '0'
          }
          this.activeUser.isUrge = '0'
          this.setChangeUserID(this.activeUser.userId)
          this.setPageInitData('2')
        }
      })
    },
    // 季度总结是否显示在右侧tabs列表
    quarterlySummaryChange(status) {
      this.quarterlyShow = status
    },
    // 类型切换
    typeChange(item) {
      if (this.queryRouter.needDealStatus === 1) return
      if (this.queryRouter.isEnd) return
      const { id, value } = item
      if (value.toString() === '0' || id === this.activeType) return
      if (this.groupByLeader) {
        this.groupLeaderDealSelect(id)
      } else {
        if (id === '-3') {
          this.selectRollList = this.rollList
        } else {
          this.selectRollList = this.rollList.filter(item => {
            return String(item.status) === id
          })
        }
        this.setActivePeople(this.selectRollList[0])
      }
      this.activeType = id
    },
    // 设置当前选中的用户信息
    setActivePeople(data) {
      console.log('data :>> ', data)
      this.activeUser = data
      this.setChangeUserID(this.activeUser.userId)
      if (
        Number(this.activeUser.status) === 2 ||
        Number(this.activeUser.status) === 3 ||
        this.queryRouter.busSign.includes('DEAL_MAIN_LEADER_ASSESS')
      ) {
        this.quarterlyShow = true
      } else {
        this.quarterlyShow = false
      }
    },
    setEvaluateTypeTabsVal() {
      let [total, noScoreNum, scoredNum, noSubmitNum] = [0, 0, 0, 0]
      this.evSelectUserList.forEach(item => {
        total++
        if (Number(item.status) === 1) {
          noScoreNum++
        } else if (Number(item.status) === 2 || Number(item.status) === 3) {
          scoredNum++
        } else if (Number(item.status) === 0) {
          noSubmitNum++
        }
      })

      this.evaluateTypeTabs[0].value = total
      this.evaluateTypeTabs[1].value = noScoreNum
      this.evaluateTypeTabs[2].value = scoredNum
      this.evaluateTypeTabs[3].value = noSubmitNum
    },
    // 分管领导评价
    getPageGradeDataList(type) {
      getFirstAssessData({
        needId: this.queryRouter.needId,
        recordType: this.queryRouter.recordType,
        saScoringId: this.queryRouter.saScoringId,
        busSign: this.queryRouter.busSign,
        requestType: this.requestType,
        keyWord: '',
        title: this.queryRouter.title || '',
      }).then(res => {
        this.showHistory = res.data.showHistory
        if (['0', '2'].includes(type)) {
          const arr = res.data.userStatusVOList
          arr.forEach(li => {
            if (li.userCategory === 2 || li.userCategory === 3) {
              li.isLeaderAssessDataResponseVOS = true
            } else {
              li.isLeaderAssessDataResponseVOS = false
            }
          })
          this.rollList = arr
          this.setEvSelectUserList(this.rollList)
          this.selectRollList = this.rollList
          this.goodNum = res.data.goodRankCount
          this.pageTitle = res.data.title
        }

        this.isUrgeAll = res.data.isUrge
      })
    },

    // 主要领导评价
    getLenderUserAssessData(type) {
      getUserAssessData(this.$route.query.needId).then(res => {
        const data = res.data
        this.groupByLeader = data.isGroupByLeader === 1
        this.isUrgeAll = res.data.isUrge
        this.calcRule = data.calcRule
        this.needPlusMinusPoints = data.needPlusMinusPoints
        this.needPeopleAssess = data.needPeopleAssess
        this.showHistory = data.showHistory
        if (['0', '2'].includes(type)) {
          if (this.groupByLeader) {
            this.groupLeaderDeal(data)
            return
          }
          let userListArr = []
          if (data.leaderAssessDataResponseVOS && data.leaderAssessDataResponseVOS.length > 0) {
            data.leaderAssessDataResponseVOS.forEach(item => {
              item.isLeaderAssessDataResponseVOS = true
            })
          } else {
            data.leaderAssessDataResponseVOS = []
          }
          userListArr = data.leaderAssessDataResponseVOS.concat(data.userAssessDataResponseVOS)
          if (userListArr.length) {
            userListArr.forEach(el => {
              if (!el.assessRank) {
                el.assessRank = ''
              }
              // 突出表现
              if (!el.scoringExpressionVO) {
                el.scoringExpressionVO = {}
                el.scoringExpressionVO.expression = ''
                el.scoringExpressionVO.voiceList = []
              }
              // 工作建议
              if (!el.scoringSuggestVO) {
                el.scoringSuggestVO = {}
                el.scoringSuggestVO.suggestion = ''
                el.scoringSuggestVO.voiceList = []
              }
            })
          }
          if (data.isSetLeaderAssess === 1) {
            userListArr.forEach(item => {
              if (!item.mainLeaderAssessRank && item.leaderAssessRank) {
                item.mainLeaderAssessRank = item.leaderAssessRank
                item.mainLeaderAssessScore = item.leaderAssessScore
              }
            })
          }
          this.rollList = userListArr
          this.setEvSelectUserList(this.rollList)
          this.goodNum = data.goodRankCount
          this.pageTitle = data.title
          this.selectRollList = this.rollList
        }
      })
    },

    // 提交所有的
    async commitAll() {
      if (Number(this.evaluateTypeTabs[3].value) !== 0) {
        this.$alert(`${this.evaluateTypeTabs[3].value}人尚未提交季度总结，暂时无法进行评价。`, '提示', {
          confirmButtonText: '确定',
        })
        return
      }
      // 是否保存了所有的评价
      let saveAll = true
      if (Number(this.evaluateTypeTabs[1].value) !== 0) {
        for (let index = 0; index < this.rollList.length; index++) {
          const el = this.rollList[index]
          if (Number(el.status) !== 2) {
            this.$alert(`${this.evaluateTypeTabs[1].value}人未评价，请完成所有评价后再提交。`, '提示', {
              confirmButtonText: '确定',
              callback: action => {
                if (this.changeUserID !== el.userId) {
                  this.setChangeUserID(el.userId)
                }
              },
            })
            saveAll = false
            return
          }
        }
      }
      if (!saveAll) {
        return false
      }

      const { data } = await checkSubmitAllAssess(this.$route.query.needId)
      if (data.status === 0) {
        this.$confirm('您确定要提交所有评分吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            this.setCommitAll()
          })
          .catch(() => {})
      } else if (data.status === 1) {
        this.$confirm(data.tips, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            this.setCommitAll()
          })
          .catch(() => {})
      } else if (data.status === 2) {
        this.$confirm(data.tips, '提示', {
          confirmButtonText: '确定',
          type: 'warning',
        })
          .then(async () => {})
          .catch(() => {})
      }
    },
    // 提交所有的方法
    async setCommitAll() {
      const { status } = await submitAllAssess(this.$route.query.needId)
      if (status === 200) {
        this.$message({
          message: '提交成功',
          type: 'success',
        })
        this.$store.state.stateAlive = false
        this.$router.go(-1)
      }
    },

    // 主管领导保存
    lenderTableSave() {
      const dataArr = []
      let arrBox = []
      if (this.queryRouter.busSign.includes('DEAL_MAIN_LEADER_ASSESS')) {
        arrBox = cloneDeep(this.rollList)
      } else {
        arrBox = cloneDeep(this.batchRollList)
      }
      for (let index = 0; index < arrBox.length; index++) {
        const el = arrBox[index]
        if (el.assessRank) {
          if (
            Number(el.assessRank) === 3 &&
            !el.scoringSuggestVO.suggestion.trim() &&
            String(el.leaderAssessRank) !== '3'
          ) {
            return this.$alert(`${el.userName}等次评价为“一般”，需要填写领导点评`, '提示', {
              confirmButtonText: '确定',
            })
          }
          if (Number(el.assessRank) === 4 && (!el.remark || !el.remark.trim()) && String(el.leaderAssessRank) !== '4') {
            return this.$alert(`${el.userName}等次评价为“较差”，需要填写较差原因`, '提示', {
              confirmButtonText: '确定',
            })
          }

          el.status = 2
          dataArr.push({
            assessRank: el.assessRank,
            processInstanceId: el.processInstanceId,
            saveStatus: 1,
            scoringId: el.saScoringId,
            scoringExpressionVO: el.scoringExpressionVO,
            scoringSuggestVO: el.scoringSuggestVO,
            taskId: el.taskId,
            totalScore: el.totalScore.toString(),
            remark: el.remark,
          })
        }
      }
      saveSimpleAssess(dataArr).then(res => {
        if (res.status === 200) {
          const data = res.data
          if (data.status === 0) {
            this.$message({
              message: '保存成功',
              type: 'success',
            })
            this.setEvSelectUserList(arrBox)
            this.batchShow = false
          } else {
            this.$message.warning(data.tips)
          }
        }
      })
    },
    // 主管领导提交打分
    async lenderTableCommit() {
      const that = this
      if (Number(that.evaluateTypeTabs[3].value) !== 0) {
        that.$alert(`${that.evaluateTypeTabs[3].value}人尚未提交季度总结，暂时无法进行评价。`, '提示', {
          confirmButtonText: '确定',
        })
        return
      }
      // 是否保存了所有的评价
      let saveAll = true
      if (Number(that.evaluateTypeTabs[1].value) !== 0) {
        for (let index = 0; index < that.rollList.length; index++) {
          const el = that.rollList[index]
          if (String(el.status) !== '2') {
            that.$alert(`${that.evaluateTypeTabs[1].value}人未评价，请完成所有评价后再提交。`, '提示', {
              confirmButtonText: '确定',
              callback: action => {
                if (that.changeUserID !== el.userId) {
                  that.setChangeUserID(el.userId)
                }
              },
            })
            saveAll = false
            return
          }
        }
      }

      if (!saveAll) {
        return false
      }
      const { data } = await checkSubmitAllAssess(that.$route.query.needId)
      if (data.status === 0) {
        that
          .$confirm('您确定要提交所有评分吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(async () => {
            that.setCommitAll()
          })
          .catch(() => {})
      } else if (data.status === 1) {
        that
          .$confirm(data.tips, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          })
          .then(async () => {
            that.setCommitAll()
          })
          .catch(() => {})
      } else if (data.status === 2) {
        that
          .$confirm(data.tips, '提示', {
            confirmButtonText: '确定',
            type: 'warning',
          })
          .then(async () => {})
          .catch(() => {})
      }
    },
    batchAll() {
      let noSubmitData = []
      let submitData = []
      noSubmitData = this.rollList.filter(item => {
        return Number(item.status) === 0
      })
      submitData = this.rollList.filter(item => {
        return Number(item.status) !== 0
      })
      this.noSubmitData = noSubmitData
      if (submitData.length > 0) {
        const arrParm = []
        submitData.forEach(item => {
          arrParm.push({
            busSign: item.busSign || this.queryRouter.busSign,
            noteId: item.noteId,
          })
        })
        getListAssessContent(arrParm).then(res => {
          if (res.status === 200) {
            const data = res.data
            const arr = []
            // eslint-disable-next-line array-callback-return
            data.map((li, index) => {
              // 突出表现
              if (!li.scoringExpressionVO) {
                li.scoringExpressionVO = {}
                li.scoringExpressionVO.expression = ''
                li.scoringExpressionVO.voiceList = []
              }
              // 工作建议
              if (!li.scoringSuggestVO) {
                li.scoringSuggestVO = {}
                li.scoringSuggestVO.suggestion = ''
                li.scoringSuggestVO.voiceList = []
              }
              arr.push({ ...submitData[index], ...li })
            })
            this.batchRollList = arr.concat(noSubmitData)
            this.batchShow = true
          }
        })
      } else {
        this.batchRollList = noSubmitData
        this.batchShow = true
      }
    },
    batchSave() {
      this.lenderTableSave()
    },
    groupLeaderDeal(data) {
      this.pageTitle = data.title
      // console.log(data)
      let num = 0
      const rollList = []
      const userListArr = data.leaderGroupUserAssessVOS || []
      userListArr.forEach(item => {
        item.userAssessDataResponseVOS.sort((a, b) => {
          return Number(a.leaderAssessRank) - Number(b.leaderAssessRank)
        })
        item.userAssessDataResponseVOS.forEach(li => {
          if (!li.assessRank) {
            li.assessRank = ''
          }
          // 突出表现
          if (!li.scoringExpressionVO) {
            li.scoringExpressionVO = {}
            li.scoringExpressionVO.expression = ''
            li.scoringExpressionVO.voiceList = []
          }
          // 工作建议
          if (!li.scoringSuggestVO) {
            li.scoringSuggestVO = {}
            li.scoringSuggestVO.suggestion = ''
            li.scoringSuggestVO.voiceList = []
          }
          if (data.isSetLeaderAssess === 1) {
            if (!li.mainLeaderAssessRank && li.leaderAssessRank) {
              li.mainLeaderAssessRank = li.leaderAssessRank
              li.mainLeaderAssessScore = li.leaderAssessScore
            }
          }
          li.shortIndex = num
          num++
        })
        rollList.push(...item.userAssessDataResponseVOS)
      })

      this.rollList = rollList
      this.setEvSelectUserList(this.rollList)
      this.goodNum = data.goodRankCount
      this.groupByLeaderList = userListArr
      this.selectRollList = userListArr
    },
    groupLeaderDealSelect(id) {
      if (id === '3') {
        this.selectRollList = this.groupByLeaderList
      } else {
        this.selectRollList = this.groupByLeaderList.filter(item => {
          return item.userAssessDataResponseVOS.filter(li => {
            console.log(li.status)
            return String(li.status) === id
          })
        })
      }
    },
  },
  deactivated() {
    this.setChangeUserID('')
  },
  destroyed() {
    this.setChangeUserID('')
  },
}
</script>

<style lang="scss" scoped>
@import '@styles/layout.scss';
.evaluate_main {
  font-size: 16px;
  height: 100%;
  .content {
    flex: 1;
    display: flex;
    align-items: stretch;
    padding: 20px 0;
    height: calc(100% - 80px);
    position: relative;
    .left-con {
      flex: 1;
      width: 100%;
      max-width: 1400px;
      height: 100%;
      margin: 0 auto;
      // position: relative;
      display: flex;
      flex-direction: column;
    }
    .right-con {
      width: 380px;
      height: 100%;
      overflow: auto;
      position: relative;
      border-right: 1px solid #e4eaf0;
    }
  }
  // 头部
  .page_header {
    position: absolute;
    right: 20px;
    top: -40px;
    .oper {
      display: flex;
    }
  }
  .page_main {
    border-top: 1px solid #e4eaf0;
    border-bottom: 1px solid #e4eaf0;
    border-left: 1px solid #e4eaf0;
    height: 100%;
    .page_main_type {
      height: 50px;
      display: flex;
      font-size: 14px;
      &-list {
        width: 190px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        &:not(:last-of-type) {
          border-right: 1px solid #dadce0;
        }
        &.active {
          background-color: #d2c5c57e;
        }
        .num {
          font-weight: bold;
          margin: 0 3px;
          padding-top: 1px;
        }
      }
    }

    .page_con {
      height: calc(100% - 50px);
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
}
.batch_dialog {
  /deep/.el-dialog {
    max-height: 80%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    .el-dialog__body {
      flex: 1;
      overflow-y: auto;
    }
    .el-dialog__footer {
      font-size: 16px;
      text-align: center;
    }
  }
}
.dia-content {
  font-size: 16px;
  p {
    margin: 10px 20px 20px;
  }
  .person {
    color: #004db6;
    span {
      display: inline-block;
      white-space: nowrap;
      margin-right: 10px;
    }
  }
  .choose-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 35px 0;
    span {
      padding: 10px 50px;
      border: 1px solid #dadce0;
      margin: 0 20px;
      border-radius: 5px;
      cursor: pointer;
    }
    .is_select {
      background-color: #f59a23;
      color: #ffffff;
      border-color: #f59a23;
    }
  }
  .tips {
    color: #d9110d;
    font-size: 14px;
  }
  .dialog-footer {
    text-align: center;
    margin-top: 30px;
  }
}
</style>
